<template>
  <div class="smallBox">
    <div class="downLa">
      <van-icon name="arrow-down" size="24px" @click.stop="noShowPlayList" />
    </div>
    <div class="listsBox">
      <div class="playLists" v-for="(item, index) in playLists" :key="index" @click.stop="changeSong(item)">
        <div class="sName">{{ item.name }}</div>
        <div class="delx" @click.stop="delThisSong(index)">x</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MusicAudioplaylist",
  data() {
    return {};
  },
  computed:{
    // 播放列表
    playLists:{
      get(){
        return this.$store.state.playMusicList
      },
      set(){}
    }
  },
  methods: {
    noShowPlayList() {
      this.$emit("noShow");
    },
    delThisSong(index) {
      this.$store.commit("DELSONG",index)
    },
    changeSong(item){
      this.$store.commit('CHANGESONG',item)
    }
  },
};
</script>

<style lang="scss" scoped>
.smallBox {
  background: #f3f3f3;
  width: 100vw;
  height: 40vh;
  border-radius: 20px 20px 0 0;
  overflow: auto;
  .downLa {
    color: #7c7878;
    position: fixed;
    width: 100vw;
    text-align: center;
    background: #f3f3f3;
    border-radius: 20px 20px 0 0;
  }
  .listsBox {
    :first-child {
      margin-top: 24px;
    }
    .playLists {
      color: #575757;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      .sName {
        line-height: 30px;
        margin: 0 2vw;
      }
      .delx {
        font-size: 18px;
        line-height: 30px;
        margin: 0 4vw;
      }
    }
  }
}
</style>